﻿<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Chatriq - Chat & Taskmanager</title>
    <meta name="description"
          content="The ultimate Bootstrap based Messaging framework to help build Messaging or Chat application fast and easy. Fully responsive and crafted with modern elements and latest design">
    <meta name="keywords" content="Chatriq, chat, messaging, theme, platform"/>
    <meta name="subject" content="">
    <meta name="copyright" content="">
    <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon"/>

    <link rel="stylesheet" type="text/css" href="dist/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href=""/>
    <link rel="stylesheet" type="text/css" href="assets/vendors/perfect-scrollbar/perfect-scrollbar.css">
    <link rel="stylesheet" type="text/css" href="dist/css/app.min.css">
    <link rel="stylesheet" type="text/css" href="dist/css/theme/default-theme.min.css">
</head>
<body class="default-theme">
<!-- Preloader Start -->
<div class="preloader"></div>
<!-- Preloader end -->

<!-- main wrapper start -->
<div class="main-wrapper">
    <div class="chatapp">
        <!-- navbar start -->
        <nav id="navbar" class="navbar navbar-expand-md navbar-light fixed-top bg-white border-bottom shadow-sm">
            <a class="navbar-brand" href="index.html">
                <img src="assets/images/logo.svg" width="50" height="50" class="d-inline-block align-top" alt="">
                <h1>聊天室（Netty版）</h1>
            </a>

            <div class="ml-auto d-flex align-items-center">
                <h4 id="userInfo">
                    <span style="font-size: 80%">欢迎您</span>
                    <br>
                    <span class="userName" style="font-size: 80%">---</span>
                </h4>
                <div class="iconbox iconbox-search btn-hovered-light"></div>
                <div class="navbar-nav">
                    <div class="iconbox-group"></div>
                    <div class="dropdown user-nav">
                        <div class="user-avatar user-avautar-sm user-avatar-rounded" role="button"
                             data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <div class="chatriq-user chatriq-user-01"></div>
                        </div>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="javascript:;">
                                <span><i class="mdi mdi-account-outline"></i></span>
                                <span>用户信息</span>
                            </a>
                            <a class="dropdown-item" href="javascript:;">
                                <span><i class="mdi mdi-settings-outline"></i></span>
                                <span>设置</span>
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="/logout">
                                <span><i class="mdi mdi-logout-variant"></i></span>
                                <span>退出登录</span>
                            </a>
                        </div>
                    </div>
                    <div class="iconbox-searchbar">
                        <forml>
                            <input type="text" class="form-control" placeholder="消息关键词..." id="searchKeyWord" autofocus>

                            <button class="search-submit" type="submit">
                                <i class="mdi mdi-magnify"></i>
                            </button>
                            <a href="javascript:void(0)" class="search-close">
                                <i class="mdi mdi-arrow-left"></i>
                            </a>
                        </forml>
                    </div>
                </div>
            </div>
        </nav>
        <!-- navbar end -->

        <!-- sidebar start -->
        <div class="chatapp__sidebar">
            <ul class="nav" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" href="index.html">
                        <i class="mdi mdi-message-text-outline"></i><span>闲聊广场</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="privateChat.html">
                        <i class="mdi mdi-phone-outline"></i><span>私聊</span>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="contacts.html">
                        <i class="mdi mdi-account-box-outline"></i><span>通讯录</span>
                    </a>
                </li>
            </ul>
        </div>
        <!-- sidebar end -->

        <!-- main content start -->
        <div class="chatapp__content">
            <div class="chatapp__messagetab">
                <!-- user list start -->
                <div class="chatapp-user-list" style="display: none">
                    <div class="chatapp-user-list-body custom-scrollbar">
                        <div class="chatapp__headingbar">
                            <h6>All Messages</h6>
                            <div class="chatapp__actions">
                                <div class="chatapp__actions--icon">
                                    <i class="mdi mdi-heart"></i>
                                </div>
                                <div class="chatapp__actions--icon">
                                    <i class="mdi mdi-square-edit-outline"></i>
                                </div>
                                <div class="chatapp__actions--icon">
                                    <i class="mdi mdi-dots-horizontal-circle-outline"></i>
                                </div>
                            </div>
                        </div>

                        <ul class="list-unstyled">
                            <li class="active">
                                <div class="conversation ">

                                    <div class="user-avatar user-avatar-rounded online">
                                        <div class="chatriq-user chatriq-user-11"></div>
                                    </div>
                                    <div class="conversation__details">
                                        <div class="conversation__name">
                                            <div class="conversation__name--title">Jack P. Angulo</div>
                                            <div class="conversation__time">07:15 PM</div>
                                        </div>
                                        <div class="conversation__message">
                                            <div class="conversation__message-preview">
                                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
                                                consequuntur accusantium tempora. Ad officiis voluptate neque, deleniti
                                                porro necessitatibus aut!
                                            </div>
                                            <span><i class="mdi mdi-pin"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="conversation">
                                    <div class="user-avatar user-avatar-rounded online">
                                        <div class="chatriq-user chatriq-user-03"></div>
                                    </div>
                                    <div class="conversation__details">
                                        <div class="conversation__name">
                                            <span class="conversation__name--title">Earnest Clements</span>
                                            <span class="conversation__time">07:15 PM</span>
                                        </div>
                                        <div class="conversation__message">
                                            <div class="conversation__message-preview">
                                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis
                                                alias placeat repellendus voluptate quo cupiditate.
                                            </div>
                                            <span><i class="mdi mdi-volume-mute"></i></span>
                                            <span class="badge badge-primary badge-rounded">9</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="conversation">
                                    <div class="user-avatar user-avatar-rounded offline">
                                        <div class="chatriq-user chatriq-user-04"></div>
                                    </div>
                                    <div class="conversation__details">
                                        <div class="conversation__name">
                                            <div class="conversation__name--title">Willie McLaughlin</div>
                                            <div class="conversation__time">07:15 PM</div>
                                        </div>
                                        <div class="conversation__message">
                                            <div class="conversation__message-preview">
                                                Hi
                                            </div>
                                            <span><i class="mdi mdi-volume-mute"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="conversation">
                                    <div class="user-avatar user-avatar-rounded recently-active">
                                        <div class="chatriq-user chatriq-user-05"></div>
                                    </div>
                                    <div class="conversation__details">
                                        <div class="conversation__name">
                                            <div class="conversation__name--title">Andrew Showalter</div>
                                            <div class="conversation__time">Yesterday</div>
                                        </div>
                                        <div class="conversation__message">
                                            <div class="conversation__message-preview">
                                                Lorem ipsum dolor sit amet.
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="conversation">
                                    <div class="user-avatar user-avatar-rounded offline">
                                        <div class="chatriq-user chatriq-user-06"></div>
                                    </div>
                                    <div class="conversation__details">
                                        <div class="conversation__name">
                                            <div class="conversation__name--title">Michael L. Haley</div>
                                            <div class="conversation__time">Yesterday</div>
                                        </div>
                                        <div class="conversation__message">
                                            <div class="conversation__message-preview">
                                                Lorem ipsum dolor sit amet.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="conversation">
                                    <div class="user-avatar user-avatar-rounded online">
                                        <div class="chatriq-user chatriq-user-07"></div>
                                    </div>
                                    <div class="conversation__details">
                                        <div class="conversation__name">
                                            <div class="conversation__name--title">Irene D. Heffner</div>
                                            <div class="conversation__time">Yesterday</div>
                                        </div>
                                        <div class="conversation__message">
                                            <div class="conversation__message-preview">
                                                Lorem ipsum dolor sit amet.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="conversation">
                                    <div class="user-avatar user-avatar-rounded recently-active">
                                        <div class="chatriq-user chatriq-user-08"></div>
                                    </div>
                                    <div class="conversation__details">
                                        <div class="conversation__name">
                                            <div class="conversation__name--title">Shantelle B. Torres</div>
                                            <div class="conversation__time">Yesterday</div>
                                        </div>
                                        <div class="conversation__message">
                                            <div class="conversation__message-preview">
                                                Lorem ipsum dolor sit amet.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="conversation">
                                    <div class="user-avatar user-avatar-rounded offline">
                                        <div class="chatriq-user chatriq-user-09"></div>
                                    </div>
                                    <div class="conversation__details">
                                        <div class="conversation__name">
                                            <div class="conversation__name--title">Mary C. Barnes</div>
                                            <div class="conversation__time">Yesterday</div>
                                        </div>
                                        <div class="conversation__message">
                                            <div class="conversation__message-preview">
                                                Lorem ipsum dolor sit amet.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="conversation">
                                    <div class="user-avatar user-avatar-rounded online">
                                        <div class="chatriq-user chatriq-user-10"></div>
                                    </div>
                                    <div class="conversation__details">
                                        <div class="conversation__name">
                                            <div class="conversation__name--title">Gerald W. Tyson</div>
                                            <div class="conversation__time">Yesterday</div>
                                        </div>
                                        <div class="conversation__message">
                                            <div class="conversation__message-preview">
                                                Lorem ipsum dolor sit amet.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="conversation">
                                    <div class="user-avatar user-avatar-rounded online">
                                        <div class="chatriq-user chatriq-user-02"></div>
                                    </div>
                                    <div class="conversation__details">
                                        <div class="conversation__name">
                                            <div class="conversation__name--title">Willie Y. Bollin</div>
                                            <div class="conversation__time">Yesterday</div>
                                        </div>
                                        <div class="conversation__message">
                                            <div class="conversation__message-preview">
                                                Lorem ipsum dolor sit amet.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="conversation">
                                    <div class="user-avatar user-avatar-rounded recently-active">
                                        <div class="chatriq-user chatriq-user-12"></div>
                                    </div>
                                    <div class="conversation__details">
                                        <div class="conversation__name">
                                            <div class="conversation__name--title">Michael T. Howard</div>
                                            <div class="conversation__time">Yesterday</div>
                                        </div>
                                        <div class="conversation__message">
                                            <div class="conversation__message-preview">
                                                Lorem ipsum dolor sit amet.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="conversation">
                                    <div class="user-avatar user-avatar-rounded offline">
                                        <div class="chatriq-user chatriq-user-13"></div>
                                    </div>
                                    <div class="conversation__details">
                                        <div class="conversation__name">
                                            <div class="conversation__name--title">Anne T. Jackson</div>
                                            <div class="conversation__time">Yesterday</div>
                                        </div>
                                        <div class="conversation__message">
                                            <div class="conversation__message-preview">
                                                Lorem ipsum dolor sit amet.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="conversation">
                                    <div class="user-avatar user-avatar-rounded online">
                                        <div class="chatriq-user chatriq-user-14"></div>
                                    </div>
                                    <div class="conversation__details">
                                        <div class="conversation__name">
                                            <div class="conversation__name--title">Lynne E. Gilbreath</div>
                                            <div class="conversation__time">Yesterday</div>
                                        </div>
                                        <div class="conversation__message">
                                            <div class="conversation__message-preview">
                                                Lorem ipsum dolor sit amet.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="conversation">
                                    <div class="user-avatar user-avatar-rounded recently-active">
                                        <div class="chatriq-user chatriq-user-02"></div>
                                    </div>
                                    <div class="conversation__details">
                                        <div class="conversation__name">
                                            <div class="conversation__name--title">Barbara E. Conroy</div>
                                            <div class="conversation__time">Yesterday</div>
                                        </div>
                                        <div class="conversation__message">
                                            <div class="conversation__message-preview">
                                                Lorem ipsum dolor sit amet.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </div>

                    <ul id="mfbMenu" class="mfb-component--br mfb-slidein-spring" data-mfb-toggle="click">
                        <li class="mfb-component__wrap">
                            <a href="#" class="mfb-component__button--main">
                                <i class="mfb-component__main-icon--resting mdi mdi-plus ion-plus-round"></i>
                                <i class="mfb-component__main-icon--active mdi mdi-close ion-close-round"></i>
                            </a>
                            <ul class="mfb-component__list">
                                <li>
                                    <a href="javascript:;"
                                       data-mfb-label="Theme" class="mfb-component__button--child">
                                        <i class="mfb-component__child-icon mdi mdi-palette"></i>
                                    </a>
                                </li>

                                <li>
                                    <a href="javascript:;" data-mfb-label="Create Group"
                                       class="mfb-component__button--child">
                                        <i class="mfb-component__child-icon mdi mdi-account-group"></i>
                                    </a>
                                </li>

                                <li>
                                    <a href="javascript:;" data-mfb-label="New Call"
                                       class="mfb-component__button--child">
                                        <i class="mfb-component__child-icon mdi mdi-phone"></i>
                                    </a>
                                </li>

                                <li>
                                    <a href="javascript:;" data-mfb-label="New Chat"
                                       class="mfb-component__button--child">
                                        <i class="mfb-component__child-icon mdi mdi-android-messages"></i>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- user list end -->

                <!-- conversations start -->
                <div class="chatapp__conversations open">
                    <!-- conversation wrapper start -->
                    <div class="conversation-wrapper">
                        <div class="conversation-panel">
                            <div class="conversation-panel__head">
                                <div class="conversation-panel__avatar " style="width: 80%">
                                    <div class="user-avatar user-avatar-rounded" style="margin-left: 1%">
                                        <div class="chatriq-user chatriq-user-14"></div>
                                    </div>

                                    <div class="conversation__name">
                                        <div class="conversation__name--title" style="font-size: 120%" id="peopleNum">
                                            在线人数0人
                                        </div>
                                    </div>
                                </div>
                                <div class="conversation__actions">
                                    <div class="userName" style="font-size: 180%;color: white"></div>
                                    <div class="dropdown">
                                        <div class="action-icon" data-toggle="dropdown" role="button"
                                             aria-haspopup="true" aria-expanded="false">
                                            <i class="mdi mdi-dots-vertical"></i>
                                        </div>
                                        <div class="dropdown-menu dropdown-menu-right" id="noPCDropDown">
                                            <a class="dropdown-item" href="javascript:;" id="getOnline">
                                                <span><i class="mdi mdi-information-outline"></i></span>
                                                <span>当前在线用户列表</span>
                                            </a>
                                            <a class="dropdown-item" href="javascript:;" id="searchMessage">
                                                <span><i class="mdi mdi-magnify"></i></span>
                                                <span>搜索用户消息</span>
                                            </a>
                                            <a class="dropdown-item" href="javascript:;" onclick="clearMessage()">
                                                <span><i class="mdi mdi-trash-can-outline"></i></span>
                                                <span>清空聊天框</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="conversation-panel__body">
                                <div class="custom-scrollbar2">
                                    <div class="container" style="padding-top: 2%">
                                        <ul class="chat-style-2" id="messageHtml">
                                            <!--<li style="text-align: center;margin-bottom: 1%;margin-top: 1%;color: lightgray;font-size: 120%">-->
                                            <!--555-->
                                            <!--</li>-->
                                            <!--<li class="message received">-->
                                            <!--<div class="user-avatar user-avatar-rounded" style="margin-left: 2%">-->
                                            <!--<div class="chatriq-user chatriq-user-11"></div>-->
                                            <!--</div>-->
                                            <!--<div class="message__text" style="margin-left: 2%">-->
                                            <!--<div class="conversation__name">-->
                                            <!--<div class="conversation__name&#45;&#45;title" style="font-size: 120%">Jack P. Angulo</div>-->
                                            <!--</div>-->
                                            <!--<div>-->
                                            <!--我是傻逼！我是傻逼！我是傻逼！我是傻逼！我是傻逼！我是傻逼！我是傻逼！我是傻逼！我是傻逼！我是傻逼！我是傻逼！-->
                                            <!--</div>-->
                                            <!--<div class="metadata">-->
                                            <!--<span class="time">07:14 AM</span>-->
                                            <!--</div>-->
                                            <!--</div>-->
                                            <!--<div class="message__options"><i class=" mdi mdi-dots-horizontal" ></i></div>-->
                                            <!--</li>-->
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="conversation-panel__footer">
                                <div id="bar" style="display: none">

                                    <a class="nav-link active" href="index.html" style="float: left;font-size: 100%">
                                        <i class="mdi mdi-message-text-outline"
                                           style="font-size: 150%"></i><span style="font-size: 150%">闲聊广场</span>
                                    </a>


                                    <a class="nav-link" href="privateChat.html" style="float: left;font-size: 100%">
                                        <i class="mdi mdi-phone-outline" style="font-size: 150%"></i><span style="font-size: 150%">私聊</span>
                                    </a>


                                    <a class="nav-link" href="contacts.html" style="float: left;font-size: 100%">
                                        <i class="mdi mdi-account-box-outline"
                                           style="font-size: 150%"></i><span style="font-size: 150%">通讯录</span>
                                    </a>
                                    <br>
                                    <br>
                                    <br>
                                </div>
                                <div class="composer">
                                    <div class="composer__middle">
                                        <textarea class="form-control" rows="1" placeholder="请发言..."
                                                  id="message"></textarea>
                                    </div>

                                    <div class="composer__right" id="sendMessage">
                                        <!--<button class="btn btn-primary" style="border-radius: 50px"><i class="mdi mdi-send" style="color: white"></i></button>-->
                                        <div class="composer__right--send">
                                            <i class="mdi mdi-send"></i>
                                        </div>
                                        <div class="composer__right--microphone">
                                            <i class="mdi mdi-send"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- conversation panel end -->

                    <!-- information panel start -->
                    <div style="display: none">
                        <div class="information-panel__body custom-scrollbar" id="OnlinePeople">
                            <ul class="list-unstyled" id="OnlinePeopleList">
                                <li>
                                    <div class="conversation">
                                        <div class="user-avatar user-avatar-rounded offline">
                                            <div class="chatriq-user chatriq-user-04"></div>
                                        </div>
                                        <div class="conversation__details">
                                            <div class="conversation__name">
                                                <div class="conversation__name--title">Willie McLaughlin</div>
                                                <div class="conversation__time">07:15 PM</div>
                                            </div>
                                            <div class="conversation__message">
                                                <div class="conversation__message-preview">
                                                    Hi
                                                </div>
                                                <span><i class="mdi mdi-volume-mute"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- information panel end -->
                </div>
                <!-- conversations end -->
            </div>
        </div>
        <!-- main content end -->
    </div>
</div>
<!-- main wrapper end -->

<!-- Javascripts Files -->
<script src="dist/js/jquery-3.4.1.min.js"></script>
<script src="dist/js/popper.min.js"></script>
<script src="assets/vendors/bootstrap/bootstrap.bundle.min.js"></script>
<script src="assets/vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/vendors/material-floating-button/dist/mfb.min.js"></script>
<script src="dist/js/main.min.js"></script>
<script src="dist/js/layer/layer.js"></script>
<script src="dist/js/jquery.cookie.js"></script>
<script src="dist/js/adjust.js"></script>
<script src="dist/js/webSocket.js"></script>
<script src="dist/js/OnlyOneLogin.js"></script>
<script type="text/javascript">

</script>
</body>
</html>
